<template>
    <el-dialog title="教室详情" width="550px" :visible.sync="dialogFormVisible"
               :before-close="close">
      <el-form :model="model" ref="ruleForm" label-width="120px">
        <el-form-item label="教室名称" prop="roomName">
          <el-input :value="model.roomName" disabled style="width: 350px"></el-input>
        </el-form-item>
        <el-form-item label="教室分类">
          <el-select v-model="model.typeId" disabled style="width: 350px">
            <el-option
                v-for="item in typeList"
                :key="item.typeId"
                :label="item.typeName"
                :value="item.typeId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="教室用途">
          <el-select v-model="model.purposeId" multiple  disabled style="width: 350px">
            <el-option
                v-for="item in purposeList"
                :key="item.purposeId"
                :label="item.purposeName"
                :value="String(item.purposeId)">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="教室设备">
            <!-- <el-input :value="model.eqName" disabled style="width: 350px"></el-input> -->
            <el-tooltip class="item" effect="dark" :content="model.eqName">
              <el-input :value="model.eqName" disabled style="width: 350px"></el-input>
            </el-tooltip>
        </el-form-item>
        <el-form-item label="能源费">
          <el-input :value="model.cost + '.00'" disabled style="width: 350px"></el-input>
        </el-form-item>
        <el-form-item label="教室缩略图">
            
          <img v-for="(item, index) in model.urls" :key="index" style="width: 150px;height: 150px" :src="item" @click="$showImg($event,item)" alt="">
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" resize="none" :rows="4" disabled :value="model.remark"
                    style="width: 350px"></el-input>
        </el-form-item>
      </el-form>
    </el-dialog>
</template>

<script>
import api from "@/api/classroom/classroom";
export default {
    props: {
        details: {
            type: Object,
            default: () => {
                return {};
            }
        }
    },
    data() {
        return {
            dialogFormVisible: false,
            model: {},
            typeList: [],
            purposeList: []
        }
    },
    watch: {
        details(val) {
            this.model = val;
        }
    },
    mounted() {
        this.model = this.details;
        this.getType();
        this.getPurpose();
    },
    methods: {
        // 获取分类
        getType() {
            const params = {};
            return api.queryRoomType(params, 'get').then((res) => {
                this.typeList = res.content;
            })
        },
         // 获取用途
        getPurpose() {
            const params = {};
            return api.queryRoomPurpose(params, 'get').then((res) => {
                this.purposeList = res.content;
            });
        },
        show() {
            this.dialogFormVisible = true;
        },
        hide() {
            this.dialogFormVisible = false;
        },
        //关闭教室详情弹窗
        close() {
            this.dialogFormVisible = false;
        },
    }

}
</script>

<style>

</style>